import axios from 'axios'

const baseUrl = 'http://localhost:3000'
export default {
  namespaced: true, // 命名空间
  state: () => ({
    list: []
  }),
  getters: {
    totalNum (state) {
      const res = state.list.reduce((pre, cur) => {
        return pre + cur.count
      }, 0)
      return res
      // 1. 如果不写initValue， pre就是 arr[0] 数组中第一个元素
      // 2. 如果写了initValue, pre就是写的初始值， 0
    },
    totalPrice (state) {
      const res = state.list.reduce((pre, cur) => {
        return pre + cur.count * cur.price
      }, 0)
      return res
    }
  },
  mutations: {
    setList (state, payload) {
      state.list = payload
    },
    setCount (state, payload) {
      // 找到list中对应id的那一个对象，再去修改它的count
      const obj = state.list.find(el => el.id === payload.id)
      obj.count = payload.count
    }
  },
  actions: {
    // http://localhost:3000/cart    localhost => 127.0.0.1
    async getList (ctx) {
      const res = await axios.get(`${baseUrl}/cart`)
      // action中提交 mutation(commit)
      ctx.commit('setList', res.data)
    },
    // 点击加减
    async updateCount (ctx, payload) {
      const { count, id } = payload
      // 处理发送数据的逻辑  ==> 根据id修改list中对应的item的count值
      const res = await axios.patch(`${baseUrl}/cart/${id}`, {
        count
      })
      // 当我们执行到这里，请求已经发给后端了，后端已经帮我们把数据更新了
      console.log(res.data)
      // 修改前端state中list的数据，有两种方式
      // 1. 直接再发送一次getList请求，可以直接拿到最新的数据
      //     => 优点：多人操作的时候，推荐使用更新
      //   ctx ==> 相当于是store
      //   ctx.dispatch('getList')

      // 2. 直接操作本地的数据  {}  ==> 一定要注意数据同步的问题
      //    => 优点：少发一次请求
      //    => 缺点：如果多人操作操作同一份数据的时候，可能出现脏东西 （数据不同步）
      //    餐厅中吃饭，小程序点餐，一起扫码，四个人可以一起扫码。
      //    每个人都在点餐，我点一下加号， 你点一下加号
      ctx.commit('setCount', payload)
    }
  }
}
// Q: 请求是同步的还是异步的？异步的
// Q: 请求后的数据放到state中

// 1. action 发起异步请求，获取数据
//   ===> 页面中 dispatch 触发action
// 2. 获取了数据要存到state中，怎么存
//   ==> 只能在mutation中更新数据，commit

// JSON-Server
// 1. 查询  cart列表
// 接口地址：http://localhost:3000/cart
// 请求方法：get

// 2. 修改 cart中的某一个
// 接口地址: http://localhost:3000/cart/:id
// 请求方法: patch

// 实际开发 ==> get / post
